<script setup lang="ts">
	import { onMounted } from 'vue';
	const settingsData = [
		{
			title: "setting.accountSecurity",
			icon: "icon-a-AvatarFrame",
			topRadius: true,
			route: ""
		},
		{
			title: "setting.generalSettings",
			icon: "icon-settings",
			route: "/pages/generalSetting/generalSetting",
		},
		{
			title: "setting.notificationSettting",
			icon: "icon-notification"
		},
		{
			title: "setting.privacySetting",
			icon: "icon-privacy",
			bottomRadius: true,
			showDivider: false,
		},
		{
			title: "setting.clearCache",
			icon: "icon-trash-03",
			topRadius: true,
			showDivider: true,
			right: "1.25GB"
		},
		{
			title: "setting.contentPreferences",
			icon: "icon-preferences"
		},
		{
			title: "setting.myAddresses",
			icon: "icon-1301dizhi"
		},
		{
			title: "setting.addWidget",
			icon: "icon-widget"
		},
		{
			title: "setting.teenMode",
			icon: "icon-widget",
			bottomRadius: true,
			showDivider: false,
			right: "Not Enabled"
		},
		{
			title: "setting.clearCache",
			icon: "icon-a-Helpcenter",
			topRadius: true,
			showDivider: true
		},
		{
			title: "setting.teenMode",
			icon: "icon-info-circle",
			bottomRadius: true,
			showDivider: false
		},
		{
			title: "setting.switchAccount",
			topRadius: true,
			showDivider: true,
			center: true
		},
		{
			title: "setting.logOut",
			bottomRadius: true,
			showDivider: false,
			center: true
		}
	]
	const nav = (route : string) => {
		console.log(route)
		uni.navigateTo({
			url: route
		})
	}
	onMounted(() => {

	})
</script>
<template>
	<view class="setting-container">
		<com-nav-bar-title title="setting.title"></com-nav-bar-title>
		<view class="content">
			<com-nav-block v-for="menu in settingsData" :title="menu.title" :icon="menu.icon ?? ''"
				:topRadius="menu.topRadius ?? false" :bottomRadius="menu.bottomRadius ?? false"
				:showDivider="menu.showDivider ?? true" :center="menu.center ?? false" :route="menu.route ?? ''"
				:key="menu.title">
				<template #right>
					<text>{{menu.right}}</text>
				</template>
			</com-nav-block>
			<view class="info">《个人信息收集清单》《第三方信息共享清单》</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.setting-container {
		background-color: $common-background-color;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content {
			flex: 1;
			overflow: scroll;

			.info {
				text-align: center;
				font-size: 20rpx;
				color: #505266;
				width: 100%;
				padding-bottom: 40rpx;
			}
		}
	}
</style>